<!DOCTYPE HTML >
<html>
    <head>
        <title>定位</title>
        <meta charset='utf-8'>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
    </head>
    <body>
    <div class='title'>定位position</div>
    <div style='text-indent: 12px '>通过绝对定位，元素可以放置到页面上的任何位置。</div>
    <table>
        <tr>
            <td style='width: 50%'>absolute</td>
            <td>绝对定位　脱离了文档流</td>
        </tr>
        <tr>
        <td> relative</td>
        <td>相对定位　没有脱离文档流</td>
    </tr>
        <tr>
        <td>fixed</td>
        <td>视框定位</td>
    </tr>
        <tr>
        <td> static </td>
        <td> 静态（默认）</td>
    </tr>
    </table><br/>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
            &lt;div style='width:500px;
                            height:200px;
                            border:1px solid #252525;' &gt;
                &lt;h1 style='position:<span class='red'> relative;</span>
                                top:50px;
                                left:30px'&gt;
                    相对定位，距离上方50像素，左方30像素
                &lt;/h1&gt;
            &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>效果</div>

    <div style='width: 500px;height:200px; border: 1px solid #252525;' >
        <h1 style='position:relative; top:50px; left:30px'>相对定位，距离上方50像素，左方30像素</h1>
    </div>
    <hr/>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
            &lt;div style='width:500px;
                            height:200px;
                            border:1px solid #252525;' &gt;
                &lt;div style='position:<span class='red'> relative;</span>
                    &lt;h1 style='position:<span class='red'>absolute;</span>
                                top:50px;
                                left:30px'&gt;
                    绝对定位，距离上方50像素，左方30像素
                    &lt;/h1&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>效果</div>

    <div style='width: 500px;height:200px; border: 1px solid #252525;' >
        <div style='position:relative;'>
            <h1 style='position:absolute; top:50px; left:30px'>绝对定位，距离上方50像素，左方30像素</h1>
        </div>
    </div>
    <hr/>
    <div class='result'>
        参照物：
        绝对定位和相对定位，往父级标签找，直到找到有absolute和relative定位的标签。
        fixed的参照物是浏览器
    </div>
    </body>
</html>